<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 加载JQuery,富文本编辑器的依赖 -->
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="/src/initializer.js"></script>
    <title>我的博客</title>
</head>
<body>
    <div id="app" v-loading="loading" style="background-image: linear-gradient(to top, #330867 0%, #30cfd0 100%);">
        <!--   无文章视图     -->
        <el-empty description="您未发表过博客,快来编写你的第一篇文章吧" v-if="!articleInfo.total && !editing && !searching">
            <el-button type="primary" @click="editing = !editing">发表文章</el-button>
        </el-empty>
        <el-empty description="没有找到对应文章" v-if="!articleInfo.total && !editing && searching">
        </el-empty>
        <template v-else-if="articleInfo.total && !editing">
            <!--    有文章视图        -->
            <blog-article-list v-if="!searching" style="margin: 0 auto;" :article-list-info="articleInfo" @page-change="pageChange" @edit-article="editing = !editing"></blog-article-list>
            <blog-article-list v-if="searching" style="margin: 0 auto;" :article-list-info="articleInfo" @page-change="pageChangeWhileSearching" @edit-article="editing = !editing"></blog-article-list>
        </template>
        <template v-else>
            <!-- 文章编辑器视图        -->
            <!-- 文章编辑器组件在此页面作为添加文章的编辑器所以只需传入一个空文章信息 -->
            <blog-article-editor style="margin: 0 auto;" :article-info="newArticle" @cancel="cancel" @finish="addArticle"></blog-article-editor>
        </template>
    </div>
</body>
<script>
    let keyword='';
    function render() {
        new Vue({
            el: '#app',
            data: {
                userId: 0,
                articleInfo: {
                    list: [],
                    total: 0
                },
                newArticle: {
                    aid: 0,
                    title: "",
                    content: ""
                },
                isLogin: false,
                loading: false,
                editing: false,
                searching: false
            },
            // async声明这个函数为异步函数，async函数的返回值为“已兑现”状态的Promise
            async mounted(){
                // await 接Promise对象 表示等待这个Promise变成“已兑现”后再继续执行下面的代码
                await this.loadUserInfo()
                await this.loadArticleList()
            },
            methods: {
                pageChange(page) {
                    this.loadArticleList(page)
                },
                async pageChangeWhileSearching(page) {
                    this.loading = true
                    try {
                        const info = (await axios(Api.getArticleListByKeyWord(this.userId, keyword, page))).data
                        this.searching = true
                        this.loading = false
                        this.articleInfo = info
                    } catch(e) {
                        this.loading = false
                        if(e.response) {
                            this.$alert(e.response.data.message)
                        }else {
                            this.$alert("网络错误")
                        }
                    }
                },
                async loadUserInfo() {
                    // 在async函数里，await表达式的返回值，就是then的参数1
                    try {
                        this.loading = true
                        this.userId = (await axios(Api.getUserInfo())).data.id
                        this.newArticle.aid = (await axios(Api.getUserInfo())).data.id
                        this.isLogin = true
                        this.loading = false
                    } catch (e) {
                        this.loading = false
                        this.isLogin = false
                        if(e.response) {
                            this.$alert(e.response.data.message)
                        }else {
                            this.$alert("网络错误")
                        }
                    }
                },
                async loadArticleList(page = 1) {
                    this.loading = true
                    try {
                        const info = (await axios(Api.getArticleList(this.userId, page))).data
                        this.loading = false
                        this.articleInfo = info
                    } catch(e) {
                        this.loading = false
                        if(e.response) {
                            this.$alert(e.response.data.message)
                        }else {
                            this.$alert("网络错误")
                        }
                    }
                },
                async cancel() {
                    this.newArticle.title = ""
                    this.newArticle.content = ""
                    this.editing = false
                },
                async addArticle(page = 1) {
                    this.editing = true
                    try {
                        this.loading = true
                        await axios(Api.addArticle(this.newArticle))
                        this.articleInfo = (await axios(Api.getArticleList(this.userId, page))).data
                        this.$alert("发表成功!")
                        this.editing = false
                        this.loading = false
                    } catch (e) {
                        this.loading = false
                        this.editing = false
                        if(e.response) {
                            this.$alert(e.response.data.message)
                        }else {
                            this.$alert("网络错误")
                        }
                    }
                },
                async searchArticle(page = 1) {
                    this.loading = true
                    try {
                        keyword = this.keyWord
                        const info = (await axios(Api.getArticleListByKeyWord(this.userId, keyword, page))).data
                        this.searching = true
                        this.editing = false
                        this.loading = false
                        this.articleInfo = info
                    } catch(e) {
                        this.loading = false
                        if(e.response) {
                            this.$alert(e.response.data.message)
                        }else {
                            this.$alert("网络错误")
                        }
                    }
                }
            }
        })
    }
    init(['blog-article','article-editor']).then(render)
</script>
</html>